<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Popup 弹出层"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="基础用法">
      <hips-button
        type="primary"
        block
        @click="show1 = true"
      >
        弹出 Popup
      </hips-button>
      <hips-popup
        v-model="show1"
        :lazy-render="false"
      >
        内容
      </hips-popup>
    </demo-block>

    <demo-block title="弹出位置">
      <hips-button
        block
        @click="show2 = true"
      >
        顶部弹出
      </hips-button>
      <hips-popup
        v-model="show2"
        :overlay="false"
        position="top"
      >
        内容
      </hips-popup>

      <hips-button
        block
        @click="show3 = true"
      >
        底部弹出
      </hips-button>
      <hips-popup
        v-model="show3"
        position="bottom"
      >
        内容
      </hips-popup>

      <hips-button
        block
        @click="show4 = true"
      >
        左侧弹出
      </hips-button>
      <hips-popup
        v-model="show4"
        position="left"
      >
        内容
      </hips-popup>

      <hips-button
        block
        @click="show5 = true"
      >
        右侧弹出
      </hips-button>
      <hips-popup
        v-model="show5"
        position="right"
      >
        <hips-button
          style="margin-right: 20px"
          @click="show5 = false"
        >
          关闭弹层
        </hips-button>

        <hips-button @click="show6 = true">
          左侧弹出
        </hips-button>
        <hips-popup
          v-model="show6"
          position="left"
        >
          <hips-button @click="show6 = false">
            关闭弹层
          </hips-button>
        </hips-popup>
      </hips-popup>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Popup, Button } from '@hips/vue-ui';
export default {
  components: {
    [Popup.name]: Popup,
    [Button.name]: Button,
  },
  mixins: [ BasicView ],
  data() {
    return {
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
    };
  },

  watch: {
    show2(val) {
      if (val) {
        setTimeout(() => {
          this.show2 = false;
        }, 2000);
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.demo-popup
  overflow: hidden
  .van-doc-demo-block
    padding: 0 15px
    .van-doc-demo-block__title
      padding-left: 0

  .hips-button
    margin-bottom: 10px

.hips-popup
  width: 50%
  padding: 20px
  box-sizing: border-box
  &--top
    color: #fff
    background: rgba(0, 0, 0, 0.65)
    border-radius: 0
    width: 101%
    line-height: 16px
  &--right
  &--left
    height: 100%
  &--left
    width: 80%
  &--right
    width: 100%
  &--bottom
    width: 100%
    height: 90%
</style>
